<template>
	<u-navbar title="个人资料" :autoBack="true" titleStyle="color:#d1f5f8;margin-left:-65%;margin-top:-1%;font-size:30rpx;"
		leftIconSize="30rpx" leftIconColor="#d1f5f8" placeholder bgColor="#01a7f4" height="75rpx" />
	<view class="main">
		<view class="data">
			<image :src="user.headImg"></image>
			<text>{{user.username}}</text>
		</view>
		<view class="content">
			<u-cell :title="`学校：${schoolStore.school.schoolName}`" :isLink="false"> </u-cell>
			<u-cell :title="`学号：${user.studentId}`" :isLink="false"> </u-cell>
			<u-cell :title="`邀请码：${user.inviteCode}`" :isLink="false"> </u-cell>
			<u-cell :title="`头像`" :isLink="true" value="更改我的头像" @click="toChangeUserHeadImg"></u-cell>
			<u-cell :title="`用户名：${user.username}`" :isLink="true" value="修改用户名" @click="toChangeUsername"></u-cell>
			<u-cell :title="`手机号： ${user.phone}`" :isLink="true" value="更改手机号"></u-cell>
			<u-cell :title="`密码： ${user.password}`" :isLink="true" value="修改密码"></u-cell>
		</view>
		<view style="width: 200rpx;margin: 20rpx auto;">
			<u-button text=" 退出登录" type="warning" @click="quit"></u-button>
		</view>

	</view>
	<!-- 修改头像 -->
	<u-popup :show="changeUserHeadImg" @close="closeChangeUserHeadImg" mode="center" closeable>
		<view style="width: 500rpx;height: 300rpx;">


			<view style="width: 350rpx;margin: 0 auto;padding-left:90rpx;margin-top: 30rpx;">
				<u-upload maxCount="1" :fileList="fileList1" name="1" @afterRead="afterRead" @delete="deletePic"
					:previewFullImage="true" uploadText="上传头像,可选"></u-upload>
			</view>

			<u-button type="primary" customStyle="width:200rpx;margin: 0 auto" text="更改"
				@click="changeHeadImg"></u-button>
		</view>
	</u-popup>
	<!-- 修改用户名 -->
	<u-popup :show="changeUsername" @close="closeChangeUsername" mode="center" closeable>
		<view style="width: 500rpx;height: 200rpx;margin-top:80rpx">


			<u--input v-model="username" customStyle="height:80rpx;" prefixIcon="account" placeholder="请输入用户名"
				placeholderStyle="color:#4f63e7;font-size:20rpx" prefixIconStyle="color:#4f63e7;font-size:40rpx"
				fontSize="30rpx" shape="circle"></u--input>

			<u-button type="primary" customStyle="width:100rpx;margin: 10rpx auto" text="更改"
				@click="changeName"></u-button>
		</view>
	</u-popup>
	<!-- 修改后的提示 -->
	<u-modal :show="changeShow" :content="userStore.status.msg" @confirm=" closeChangeShow"></u-modal>
</template>

<script setup>
	import {
		ref,
	} from 'vue'
	import {
		useSchoolStore
	} from "@/stores/schoolStore.js"
	import {
		useUserStore
	} from "@/stores/userStore.js"
	import {
		onShow,
	} from "@dcloudio/uni-app";
	const schoolStore = useSchoolStore();
	const userStore = useUserStore();

	function quit() {
		uni.removeStorageSync("user")
		uni.switchTab({
			url: "/pages/user/user"
		})
	}
	//修改用户名
	const changeUserHeadImg = ref(false)

	function toChangeUserHeadImg() {
		changeUserHeadImg.value = true;
	}

	function closeChangeUserHeadImg() {
		changeUserHeadImg.value = false;
		fileList1.value = []
	}
	const user = ref("");
	onShow(async () => {
		user.value = JSON.parse(uni.getStorageSync("user"))
		await schoolStore.getSchoolById(user.value.schoolId)
	})
	//照片上传

	const fileList1 = ref([]);

	// 删除图片
	const deletePic = (event) => {
		fileList1.value.splice(event.index, 1);
	};

	// 新增图片
	const afterRead = async (event) => {
		//console.log(fileList1.value)
		//console.log(event.file)
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		lists.map((item) => {
			fileList1.value.push({
				...item,
				status: 'success',
				message: '上传成功',
			});
		});

	};

	async function changeHeadImg() {
		if (fileList1.value.length == 0) {
			uni.showToast({
				title: '未选择头像',
				duration: 1000,
				mask: true
			});
		} else {
			await userStore.updateHeadImg(fileList1.value[0].url, user.value)
			if (userStore.status.code == "200") {
				user.value = userStore.user
				uni.setStorageSync("user", JSON.stringify(userStore.user))
				fileList1.value = []
				changeUserHeadImg.value = false
			}
			changeShow.value = true

		}
	}
	const changeUsername = ref(false)
	const username = ref("")

	function toChangeUsername() {
		changeUsername.value = true
	}

	function closeChangeUsername() {
		username.value = ""
		changeUsername.value = false
	}

	async function changeName() {
		if (username.value == "") {
			uni.showToast({
				title: '请输入用户名',
				duration: 1000,
				mask: true
			});
			return;
		}
		if (username.value.length > 6) {
			uni.showToast({
				title: '不能大于6位',
				duration: 1000,
				mask: true
			});
			return;
		}
		if (username.value.indexOf(" ") != -1) {
			uni.showToast({
				title: '不能包含空格',
				duration: 1000,
				mask: true
			});
			return;
		}
		await userStore.updateMessage({
			...user.value,
			username: username.value
		})
		if (userStore.status.code == "200") {
			user.value = userStore.user
			uni.setStorageSync("user", JSON.stringify(userStore.user))
			changeUsername.value = false
		}
		changeShow.value = true
	}
	const changeShow = ref(false);

	function closeChangeShow() {
		changeShow.value = false
	}
</script>

<style lang="scss">
	body {
		.main {
			width: 98%;

			.data {
				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 100rpx;
				}

				margin-top: 15rpx;
				margin-bottom: 50rpx;
				width: 100%;
				height: 250rpx;
				display: flex;

				flex-direction: column;
				align-items: center;

				text {
					margin-top: 15rpx;
				}
			}
		}
	}
</style>